<template>
  <!-- needLogin -->
  <page-wrap hideTab :title="titleText" back stayStill contentWrapColor="#F75A3E" bgColor="#F75A3E" :dark="false" darkTxtColor="#ffffff">
    <view class="login-pc">
      <view v-if="companyList.length" class="top">
        <view class="app">
          <!-- <image class="app-logo" :src="xiaolanImg"></image> -->
          <text class="app-name">一览通</text>
          </view>
        <view class="top-title">
          你正以{{ isAdmin ? '管理员': '子账号'}}身份登录
        </view>
        <view class="top-tips">
          登陆后体验全新服务：报告库、案例库、人才库。
        </view>
        <view class="company-list-label">选择管理的企业</view>
        <scroll-view scroll-y class="company-list">
          <view class="company-list-item" :class="{'active': activityPersonId && (activityPersonId == item.adminPersonId)}" v-for="(item, index) in companyList" :key="index" @click="handleSelect(item)">
            <view class="company-list-item-top">
              <u-image class="company-logo" width="40rpx" height="40rpx" shape="circle" :src="item.logo"></u-image>
              <text class="company-name">{{item.cName}}</text>
              <view class="icon icon-selected" v-if="activityPersonId && (activityPersonId == item.adminPersonId)"></view>
            </view>
            <view class="company-list-item-bottom">
              {{ item.adminName }} {{ item.adminPhone }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view v-else>
        <image :src="loginPcImg" class="img" >
        </image>
        <view class="tips">
          {{tipsText}}
        </view>
      </view>
      <view class="action-wrap">
        <view class="action">
          <u-button type="primary" shape="circle" :loading="loginLoading" @click="handleConfirm">确认登录</u-button>
          <view v-if="from==''" class="btn-change" @click="handleChangeAccout">更换账号</view>
          <view class="btn-cancel" @click="handleCancel">取消登录</view>
        </view>  
      </view>
    </view>
    <u-modal v-model="showYP" confirm-color="#f75a3e" :title-style="{'fontWeight': 'bold'}" @confirm="handleCancel">
      <view class="slot-content">
        <view class="mb-10">您还在云聘服务期。</view>
        <view>若想体验全新一览通服务（报告库、案例库、人才库），请联系您的专属顾问同步开通。</view>
      </view>
    </u-modal>
    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </page-wrap>
</template>

<script>
import { qrScanInfo, qrLoginConfirm, getLoginQr } from "@/api"
import { getGroupAccountList } from "@/api/modules/company.js";
import { getPersonBindCompanyStatus } from "@/api/modules/company";
import loginOutMixin from '@/mixins/login-out.js';
import LoginDialog from "@/components/LoginDialog";

export default {
  mixins: [loginOutMixin],
  components:{LoginDialog},
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || '',
      loginPcImg: this.$imgBaseSelf + 'login/pc.png',
      // xiaolanImg: this.$imgBaseSelf + 'xiaolan_icon.png',
      ticket: '',
      activityPersonId: '',
      companyList: [],
      isGroup: false,
      isAdmin: false,
      loginLoading: false,
      groupAdminPid: '',
      companyBindType: '',
      showYP: false,
      titleText:"一览通PC协同端",
      tipsText:"电脑端登录确认",
      from:""
    }
  },
  onLoad(opt) {
    if(opt.scene) {
      this.ticket = opt.scene;
      console.log("opt.scene:"+opt.scene);
      let sceneSplit = opt.scene.split('-');
      if(sceneSplit&&sceneSplit.length>=2){
        console.log(sceneSplit[1]);
        if(sceneSplit[1]=='ai'){
          this.titleText = "用户登录";
          this.tipsText = "登录确认";
          this.from = sceneSplit[1];
          this.ticket = sceneSplit[0];
        }
      }
    }
    this.activityPersonId = this.personId;
    this.activityPersonId && this.qrScanInfo();
    this.getData();
    this.getPersonBindCompanyStatus();
  },
  methods: {
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    loginSuccessBack() {
      console.log("loginSuccessBack");
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      console.log("this.personId:"+this.personId);
      this.activityPersonId = this.personId;
      this.activityPersonId && this.qrScanInfo();
      this.getData();
      this.getPersonBindCompanyStatus();
    },
    getPersonBindCompanyStatus() {
      const params = {
        personId: this.personId,
      };
      getPersonBindCompanyStatus(params).then(res => {
        if(res.code == 200) {
          this.companyBindType = res.data.type;
        }
      })
    },
    getData() {
      const params = {
        personId: this.personId,
      }
      uni.showLoading();
      getGroupAccountList(params).then(res => {
        if (res.code == 200) {
          if (res.data) {
            if (res.data.groupList) {
              this.companyList = res.data.groupList.map(item => {
                if (!item.logo || item.logo == 'uppic/nocypic.gif') {
                  item.logo = this.$imgBaseSelf + 'company/logo.jpg'
                }
                return item;
              });
            }

            this.isGroup = res.data.isGroup;
            this.isAdmin = res.data.isAdmin;
            if (this.isGroup) {
              this.groupAdminPid = this.companyList[0].groupAdminPid;
            }
          } else {
            this.isGroup = false;
            this.isAdmin = false;
          }
        }
      }).finally(() => {
        uni.hideLoading();
      });
    },
    qrScanInfo() {
      const params = {
        personId: this.activityPersonId,
        ticket: this.ticket,
      };
      return qrScanInfo(params);
    },
    handleConfirm() {
      if(this.personId){
        this.loginLoading = true;
        this.loginConfirm();
      }else{
        this.showLoginDialog();
      }
    },
    loginConfirm() {
      const params = {
        personId: this.activityPersonId,
        ticket: this.ticket,
        groupAdminPid: this.groupAdminPid,
      }
      this.qrScanInfo().then(() => {
        qrLoginConfirm(params).then(res => {
          if (res.code == 200) {
            if (this.companyBindType == 2) {
              this.showYP = true;
            }

            if(this.from!=''){
              console.log("扎堆节活动登录跳转");
              uni.reLaunch({
                  url: '/pages/index/index',
                });
            }else{
              console.log("pc扫码跳转");
              if (this.companyList.length) {
                uni.reLaunch({
                  url: '/pages/company/index?fromLoginStatus=company',
                });
              } else {
                uni.reLaunch({
                  url: '/pages/company/index?showUnBindTips=1&fromLoginStatus=company',
                });
              }
            }
          }
          uni.showToast({
            title: res.status_desc,
            icon: 'none'
          });
        }).finally(() => {
          this.loginLoading = false;
        });
      })
    },
    handleCancel() {
      uni.switchTab({
        url: '/pages/index/index',
      });
    },
    handleSelect(item) {
      this.activityPersonId = item.adminPersonId;
    },
    handleChangeAccout() {
      let returnUrl = encodeURIComponent(getCurrentPages()[getCurrentPages().length-1].$page.fullPath);
      let url = '/pagesSub/public/login/index?returnUrl=' + returnUrl;

      this.loginOut(url); // loginOutMixin
    },
  }
}
</script>

<style lang="scss" scoped>
.login-pc {
  flex: 1;
  margin: 28rpx;
  padding: 85rpx 44rpx;
  border-radius: 32rpx;
  text-align: center;
  background-color: #ffffff;

  .top {
    margin-bottom: 50rpx;
    font-size: 24rpx;
    text-align: left;

    .app {
      margin-bottom: 31rpx;

      &-logo {
        margin-right: 12rpx;
        width: 64rpx;
        height: 64rpx;
      }

      &-name {
        margin-bottom: 4rpx;
        font-size: 34rpx;
        font-weight: bold;
        color: $u-type-primary;
      }
    }

    &-title {
      margin-bottom: 6rpx;
      font-size: 44rpx;
      font-weight: bold;
    }

    &-tips {
      margin-bottom: 87rpx;
      font-size: 26rpx;
      
    }
  }

  .company-list {
    max-height: calc(100vh - 930rpx);
    &-label {
      margin-bottom: 24rpx;
    }

    &-item {
      position: relative;
      margin-bottom: 26rpx;
      padding: 31rpx 70rpx 31rpx 34rpx;
      border: 2rpx solid #CBCBCB;
      border-radius: 16rpx;

      &.active {
        border-color:$u-type-primary;
      }

      &-top {
        display: flex;
        align-items: center;
      }

      &-bottom {
        padding-left: 64rpx;
        color: #888888;
      }

      .company-logo {
        margin-right: 24rpx;
      }

      .icon-selected {
        position: absolute;
        right: 22rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 32rpx;
        height: 32rpx;
        background-image: url($img-base + "library/selected.png");
      }
    }
  }

  .img {
    display: inline-block;
    width: 256rpx;
    height: 208rpx; 
    margin-bottom: 68rpx;
  }

  .tips {
    font-size: 32rpx;
  }

  .action-wrap {
    position: fixed;
    bottom: 120rpx;
    left: 30px;
    right: 30px;
    background-color: #ffffff;
  }

  .action {
    display: inline-block;
    width: 290rpx;

    .btn-cancel {
      margin-top: 44rpx;
      color: #888888;
    }

    .btn-change {
      margin-top: 44rpx;
      color: #888888;
    }
  }
}
.slot-content {
  padding: 32rpx;
  font-size: 28rpx;

  .mb-10 {
    margin-bottom: 10rpx;
  }
}
</style>